<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="../jquery-3.7.1.js"></script>

    
</head>
<body>
    <!-- self-tag：用户自定义属性 -->
    <p align="center" self-tag="必须的">好好学习，天天向上</p>

    <button id="btn1">获取属性</button>
    <button id="btn2">设置属性</button>
    <button id="btn3">删除节点属性</button>
    <!--
            1、获取属性值：
                节点对象.attr("属性名称")
                节点对象.prop("属性名称")

            2、设置属性值：
                节点对象.attr("属性名称","属性值")
                节点对象.prop("属性名称","属性值")


            3、删除属性
                节点对象.removeAttr("属性名称")
                节点对象.removeProp("属性名称")

            区别：
                attr：可以操作原生属性，也可以操作自定义属性
                prop：只能操作原生属性



        -->
    <!-- 第三：使用 JQ -->
    <script>

        

        $("#btn1").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p") ;
           
            // 第二：进行相关的操作 - 获取节点属性
            var val = pNode.attr("self-tag");
            // var val = pNode.prop("self-tag");
            console.log(val);
        }) ;

        $("#btn2").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p") ;
           
            // 第二：进行相关的操作 - 设置节点属性
            // pNode.attr("align","left");
            pNode.prop("align","left");
        }) ;


        $("#btn3").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p") ;
           
            // 第二：进行相关的操作 - 移除属性
            pNode.removeAttr("align") ;
        }) ;
        



    </script>
</body>
</html>